<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>E_Mail寄送</title>
<link rel="stylesheet" href="css/jquery.validate.css" media="screen" />
</head>
<body>

	<form id="emailForm" action="SendMailServlet" method="post">
		標題:<input type="text" name="subject" id="subject" placeholder="請輸入標題"><br> 
			<div style="padding-left:2.5%;">
			
				<input type="button" name="add" id="add" value="新增收件者"><br>
					</div>
		<div class="fieldwrapper" id="field1">收件者:
				<input type="text" name="recipient" id="recipient" class="recipient" >
					</div>
				
		內容:<textarea class="ckeditor" name="message" id="message"></textarea>
		<div style="padding-left:51%;">
		<input type="submit" value="送出">
		</div>
	</form>
	
	

	<script type="text/javascript" src="js/jquery-1.8.1.min.js"></script>
    <script type="text/javascript" src="js/ckeditor/ckeditor.js"></script>
	<script type="text/javascript" src="js/jquery.validate.js"></script>
	<script type="text/javascript" src="js/additional-methods.js"></script>
	<script type="text/javascript" src="js/messages_zh_TW.js"></script>
	
	<script type="text/javascript">
	
	
	$(function(){
		
		
		$("#add").click(function(){
			var intId = $(".fieldwrapper").size() + 1;
			var fieldWrapper = $("<div class=\"fieldwrapper\" id=\"field" + intId + "\"/>");
			var fName = $("<input type=\"text\" name=\"recipient\" id=\"recipient" + intId + "\" class=\"recipient\" />");
			var removeButton = $("<input type=\"button\" class=\"remove\" id=\"remove\" value=\"刪除\" />");
			removeButton.click(function() {
				$(this).parent().remove();
				var wrappers = $(".fieldwrapper");
				if (wrappers.length > 1) {
					var newId = 1;
					wrappers.each(function(){
						renewId = "field" + newId;
						$(this).attr("id",renewId);
						newId++;
					});
				}
			});
			
			fieldWrapper.append(fName);
			fieldWrapper.append(removeButton);
			$("#field1").append(fieldWrapper);
		});

			
		
		$('#emailForm').submit(function(){
            $('textarea.ckeditor').each(function () {
               var $textarea = $(this);
               $textarea.val(CKEDITOR.instances[$textarea.attr('name')].getData());
            });
        });//用ckeditor就要打這些
        
		$("#emailForm").validate({
    		rules:{
    			subject:"required",
    			recipient:"required email"
    		},
    		messages:{
    			subject:"請輸入標題",
    			recipient:{
    				required:"請輸入收件者",
    				email:"電子郵件格式不正確"
    				
    			}
    		},
    		
    		errorPlacement: function (error, element) {
    			if (element.is(":button")) {
    				error.appendTo(element.next()).before("<label/>");


			    } else {
			        error.insertAfter(element);
			    }
			},      		
			ignore: ''//針對ckeditor有沒有填入資料
    	});
	});
	</script>
</body>
</html>